<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>assign shippingOrder</title>
    <link rel="stylesheet" href="../../static/css/common.css">
    <link rel="stylesheet" href="../../static/css/form.css">
    <link rel="stylesheet" href="../../static/css/carrierInfo.css">
    <link rel="stylesheet" href="../../static/css/order.css">
    <link rel="stylesheet" type="text/css" href="../../static/layui/css/layui.css"/>
    <script type="text/javascript" src="../../static/layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
</head>
<body>
<!-- 菜单栏 -->
<link rel="stylesheet" href="../../static/css/index.css">
<ul>
    <div th:each="item:${menuList}" class="display:inline-de">
        <li><a th:href="@{${item.path}}" th:text="${item.name}"></a></li>
    </div>
    <a th:href="@{/login}" style="float:right;font-size: 16px;margin: 17px;color: white;">> 登出</a>
</ul>
<div class="box">
    <div class="form-group">
        <h2 class="form-title" style="font-family: 幼圆;font-weight: bold" >选择的货运单</h2>
        <div class="form">
            <img src="../../static/img/truck.png" style="width: 120px;height: 150px;position: relative;left: 10%">
            <form class="form-content" th:object="${shippingOrder}" >
                <!-- 表单项内容 -->
                <div class="form-row">
                    <label>编号</label>
                    <span th:text="*{id}"/>
                </div>
                <div class="form-row">
                    <label>货物内容</label>
                    <span th:text="*{goods}"/>
                </div>
                <div class="form-row">
                    <label>总重量(t)</label>
                    <span th:text="*{weight}"/>
                </div>
                <div class="form-row">
                    <label>总距离(km)</label>
                    <span th:text="*{distance}"/>
                </div>
            </form>
        </div>
        <button class="layui-btn " test-active="assignTruck">添加派车单</button>
        <a th:href="@{'/carrier/myShippingOrder'}">
            <button class="layui-btn">提交派车单</button>
        </a>
        <table class="layui-table" id="table" style="text-align: center">
            <thead>
            <tr>
                <th >货车</th>
                <th>司机</th>
                <th>货物内容</th>
                <th>货物重量(t)</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="t : ${shippingOrder.truckOrder}">
                <td th:text="${t.truck}"></td>
                <td th:text="${t.driver}"></td>
                <td th:text="${t.goods}"></td>
                <td th:text="${t.weight}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div>
    <input id="myTruck" th:type="hidden" th:value="${truck}">
    <input id="myDriver" th:type="hidden" th:value="${driver}">
</div>
<script>
    layui.use(function(){
        const layer = layui.layer
            , form = layui.form
            , util = layui.util
            , orderId = [[${shippingOrder.id}]]
            , carrierId = [[${carrier.id}]]
            ,driverList = JSON.parse(document.getElementById('myDriver').value)
            ,truckList = JSON.parse(document.getElementById('myTruck').value);
        //触发事件
        util.on('test-active', {
            'assignTruck': function(){
                layer.open({
                    type: 1
                    ,resize: false
                    ,shadeClose: true
                    ,area: '500px'
                    ,title: '派车'
                    ,content: ['<form class="layui-form layui-form-pane" style="margin: 15px;">'
                        ,'<li class="layui-form-item">'
                        ,'<label class="layui-form-label">司机</label>'
                        ,'<div class="layui-input-inline">'
                        ,'<select name="driver" lay-verify="required" id="selectDriver">'
                        ,'<option value="">请选择司机</option>'
                        ,'</select></div>'
                        ,'</li>'
                        ,'<li class="layui-form-item">'
                        ,'<label class="layui-form-label">货车</label>'
                        ,'<div class="layui-input-inline">'
                        ,'<select name="truck" lay-verify="required" id="selectTruck">'
                        ,'<option value="">请选择货车</option>'
                        ,'</select></div>'
                        ,'</li>'
                        ,'<li class="layui-form-item">'
                        ,'<label class="layui-form-label">货物</label>'
                        ,'<div class="layui-input-block">'
                        ,'<input class="layui-input" style="width: 250px" th:value="${goods}" name="goods" required/>'
                        ,'</div>'
                        ,'</li>'
                        ,'<li class="layui-form-item">'
                        ,'<label class="layui-form-label">载重(t)</label>'
                        ,'<div class="layui-input-block">'
                        ,'<input class="layui-input" style="width: 250px" name="weight"/>'
                        ,'</div>'
                        ,'</li>'
                        ,'<li class="layui-form-item" style="text-align:center;">'
                        ,'<button  lay-submit="" lay-filter="truckOrder" class="layui-btn">submit</button>'
                        ,'</li>'
                        ,'</form>'].join('')
                    ,success: function(layero, index){
                        let d;
                        console.log(driverList)
                        console.log(truckList)
                        for(d in driverList){
                            $("#selectDriver").append("<option value="+driverList[d].id+">"+driverList[d].realName+"</option>");
                        }
                        for(var t in truckList){
                            $("#selectTruck").append("<option value="+truckList[t].id+">"+truckList[t].number+"(dwt:"+truckList[t].weight+")</option>");
                        }
                        layui.form.render();
                        layero.find('.layui-layer-content').css('overflow', 'visible');
                        form.render().on('submit(truckOrder)', function(data){
                            data.field.orderId = orderId
                            data.field.carrierId = carrierId
                            console.log(data)
                            $.ajax({
                                type: "post",
                                url: "/carrier/createTruckOrder",
                                data: data.field,
                                success:function (result) {
                                    window.parent.location.reload();
                                    layer.closeAll();
                                }
                            });
                            return false;
                        });
                    }
                });
            }
        });
    });
</script>


</body>
</html>